<template>
  <div style="display: flex">
    <el-form-item label="课程" style="width: 200px;margin-left: 12px">
      <el-select v-model="form.region" placeholder="全部">
        <el-option label="全部" value="course0" @click="onSelectCourse('')"/>
        <el-option v-for="item in corList" :label="item" value="course0" @click="onSelectCourse(item)"/>
      </el-select>
    </el-form-item>
    <el-input @change="getScoreList" v-model="parms.stuName" size="small" placeholder="Type to search"  style="width: 200px ; height: 32px;margin-left: 48px"/>
    <el-button type="primary" style="margin-left: 24px"  ref="btnRef" @click="open = true"><i class="el-icon-plus"></i>新增</el-button>
    <el-button type="primary" style="margin-left: 24px"  ref="btnRef" @click="open = true"><i class="el-icon-search"></i>搜索</el-button>
    <el-button type="warning" style="margin-left: 24px"  ref="btnRef" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
    <el-tour v-model="open">
      <el-tour-step
          title="新增成绩"
          description="123"
      />

    </el-tour>
  </div>

  <el-table :data="tableData" stripe style="width: 1000px" table-layout="auto">
    <el-table-column prop="corName" label="班级" />
    <el-table-column prop="stuId" label="学号" width="180" />
    <el-table-column prop="stuName" label="姓名" width="180" />
    <el-table-column prop="clsName" label="班级" />
    <el-table-column prop="score" label="分数" />
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="parms.pageNum"
        v-model:page-size="parms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getScoreList"
        @current-change="getScoreList"
    />
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue'
import { reactive } from 'vue'
import type { ButtonInstance } from 'element-plus'
import request from "@/utils/request";
const btnRef = ref<ButtonInstance>();
const currentPage = ref(1)

let corList = ref([])

const open = ref(false)
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
let total = ref(0)
let parms=ref({
  pageNum:1,
  pageSize:10,
  corName:'',
  stuName:''
})
const onSubmit = () => {
  console.log('submit!')
}
const search = ref('')
// const filterTableData = computed(() =>
//     tableData.filter((data) => {
//       const searchData = search.value.toLowerCase();
//       for (const key in data) {
//         if (data[key].toLowerCase().includes(searchData)) {
//           return true;
//         }
//       }
//       return false;
//     })
// );

function getScoreList() {
  request.get('/score/page',{params:parms.value}).then(res => {
    if (res.code === "200") {
      total.value=res.data.total;
      tableData.value=res.data.list;
    }
  });
}
function load() {
  request.get('/course/list').then(res => {
    if (res.code === "200") {
      res.data.forEach(item => {
        corList.value.push(item["corName"]);
      });
    }
  });
  getScoreList()
}

function onSelectCourse(item:string){

  form.region=item;
  parms.value.corName=item;
  console.log(parms.value)
  getScoreList();
}
onMounted(()=>{
  load();
})
function reset() {
  parms.value={
    pageNum:1,
    pageSize:10,
    corName:'',
    stuName:''
  }
}
let tableData = ref([
  {

    stuName: '东海帝皇',
    corName:'前端',
    stuId:'22002362',
    clsName:'22软件1班',
    score:'85'
  },
  {

    stuName: '目白麦昆',
    corName:'后端',
    stuId:'22002367',
    clsName:'22软件2班',
    score:'86'
  },
  {

    stuName: '东海帝皇',
    corName:'前端',
    stuId:'22002362',
    clsName:'22软件1班',
    score:'85'
  },
  {

    stuName: '目白麦昆',
    corName:'后端',
    stuId:'22002367',
    clsName:'22软件2班',
    score:'86'
  },{

    stuName: '东海帝皇',
    corName:'前端',
    stuId:'22002362',
    clsName:'22软件1班',
    score:'85'
  },
  {

    stuName: '目白麦昆',
    corName:'后端',
    stuId:'22002367',
    clsName:'22软件2班',
    score:'86'
  },{

    stuName: '东海帝皇',
    corName:'前端',
    stuId:'22002362',
    clsName:'22软件1班',
    score:'85'
  },
  {

    stuName: '目白麦昆',
    corName:'后端',
    stuId:'22002367',
    clsName:'22软件2班',
    score:'86'
  },
])
</script>
